<template>
  <el-card>
    <el-row type="flex" justify="space-between">
      <span>试卷名称：{{ paperInfoData.paper_name }}</span>
      <el-button type="primary" plain @click="back">返回列表</el-button>
    </el-row>
    <hr
      style="
        width: 104%;
        margin-left: -22px;
        background-color: #ccc;
        height: 0.2px;
        border: none;
      "
    />
    <br />
    <el-row>
      <el-col :span="6"> 归属学科:{{ paperInfoData.subject_name }} </el-col>
      <el-col :span="6"> 归属目录:{{ paperInfoData.directory_name }}</el-col>
      <el-col :span="6">
        试卷状态:
        <el-tag type="success" size="mini">{{
          paperInfoData.show_state === 1 ? "启用" : "禁止"
        }}</el-tag></el-col
      >
      <el-col :span="6">
        试卷类型:{{
          paperInfoData.paper_type === 1 ? "真题卷" : "模拟卷"
        }}</el-col
      >
    </el-row>
    <br />
    <el-row>
      <el-col :span="6">
        试卷难度:{{
          paperInfoData.paper_type === 1
            ? "简单"
            : paperInfoData.paper_type === 2
            ? "中等"
            : "较难"
        }}</el-col
      >
      <el-col :span="6"> 试卷题型:{{ paperInfoData.quest_type }}</el-col>
      <el-col :span="6"> 试卷总分:{{ paperInfoData.total_score }}分</el-col>
      <el-col :span="6"> 及格分数:{{ paperInfoData.pass_score }}分</el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="6"> 创建人:{{ paperInfoData.create_name }}</el-col>
      <el-col :span="6">
        创建时间:{{
          new Date(paperInfoData.created_at)
            .toLocaleDateString()
            .replace(/\//g, "-")
        }}</el-col
      >
    </el-row>
    <hr
      style="
        width: 104%;
        margin-left: -22px;
        background-color: #ccc;
        height: 0.2px;
        border: none;
      "
    />
    <el-form :model="paperInfoData">
      <el-form-item label="选题信息">
        <el-table
          size="large"
          border
          :data="JSON.parse(paperInfoData.check_question_list)"
          empty-text="请勾选试卷包含题型，从而生成选题模板"
          style="width: 100%"
        >
          <el-table-column
            header-align="center"
            prop="name"
            label="题型"
            width="100"
          >
            <template slot-scope="scope" width="1000">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="选题信息" width="1000">
            <template slot-scope="scope" width="1000">
              <el-row>
                <el-col :span="3">
                  共
                  <el-input
                    size="small"
                    v-model.number="scope.row.num"
                    style="width: 60px"
                  ></el-input>
                  题,
                </el-col>
                <el-col :span="3">
                  每题
                  <el-input
                    v-model.number="scope.row.score"
                    size="small"
                    style="width: 60px"
                  ></el-input>
                  分,
                </el-col>
                <el-col :span="5"
                  >已选题数:
                  <el-input
                    v-model.number="scope.row.num"
                    disabled
                    size="small"
                    style="width: 60px; color: blue"
                  ></el-input
                  >题
                </el-col>
                <el-col :span="6">
                  <el-button
                    type="success"
                    size="small"
                    @click="lookFn(scope.row.type)"
                    >看题</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <hr
      style="
        width: 104%;
        margin-left: -22px;
        background-color: #ccc;
        height: 0.2px;
        border: none;
      "
    />
    <br />
    <br />
    <checkQuestInfo
      ref="lookQuestInfoRef"
      :quest_type="quest_type"
      :resultQuestData="resultQuestData"
    />
  </el-card>
</template>

<script>
import checkQuestInfo from "./checkQuest.vue";
export default {
  name: "iamloosk",
  props: {
    paperInfoData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      resultQuestData: [],
      quest_type: 0,
    };
  },
  components: { checkQuestInfo },
  methods: {
    back() {
      this.$emit("backList");
    },
    lookFn(type) {
      console.log(this.paperInfoData.question_data);
      this.resultQuestData = this.paperInfoData.question_data.filter((item) => {
        return item.quest_type === type;
      });
      //   this.singleQuest = row;
      this.$refs.lookQuestInfoRef.dialogVisible = true;
    },
  },
};
</script>

<style>
</style>